<div class="card">
  <div class="card-header">{{ formMode == "edit" ? "Edit" : "Add" }} User</div>
  <div class="card-body">
    <div class="row" [hidden]="!postError" class="alert alert-danger">
      {{ postErrorMessage }}
    </div>
    <form #form="ngForm" (ngSubmit)="onSubmit(form)">
      <div class="form-group row">
        <label for="userName" class="col-sm-3 col-form-label">User Name</label>
        <div class="col-sm-9">
          <input
            id="userName"
            name="userName"
            class="form-control"
            [(ngModel)]="user.userName"
            required
            #userNameField="ngModel"
            (blur)="onBlur(userNameField)"
            [class.is-invalid]="form.submitted && userNameField.invalid"
          />
          <span class="invalid-feedback"> Enter an user name </span>
        </div>
      </div>
      <div class="form-group row">
        <label for="email" class="col-sm-3 col-form-label">Email</label>
        <div class="col-sm-9">
          <input
            id="email"
            name="email"
            class="form-control"
            [(ngModel)]="user.email"
            required
            #emailField="ngModel"
            (blur)="onBlur(emailField)"
            [class.is-invalid]="form.submitted && emailField.invalid"
          />
          <span class="invalid-feedback"> Enter an email </span>
        </div>
      </div>
      <div class="form-group row">
        <label for="emailConfirmed" class="col-sm-3 col-form-label"
          >Email Confirmed</label
        >
        <div class="col-sm-9">
          <input
            type="checkbox"
            id="emailConfirmed"
            name="emailConfirmed"
            [(ngModel)]="user.emailConfirmed"
            #emailConfirmedField="ngModel"
            (blur)="onBlur(emailConfirmedField)"
            [class.is-invalid]="form.submitted && emailConfirmedField.invalid"
          />
        </div>
      </div>
      <div class="form-group row">
        <label for="phoneNumber" class="col-sm-3 col-form-label"
          >Phone Number</label
        >
        <div class="col-sm-9">
          <input
            id="phoneNumber"
            name="phoneNumber"
            class="form-control"
            [(ngModel)]="user.phoneNumber"
            required
            #phoneNumberField="ngModel"
            (blur)="onBlur(phoneNumberField)"
            [class.is-invalid]="form.submitted && phoneNumberField.invalid"
          />
          <span class="invalid-feedback"> Enter a phone number </span>
        </div>
      </div>
      <div class="form-group row">
        <label for="phoneNumberConfirmed" class="col-sm-3 col-form-label"
          >Phone Number Confirmed</label
        >
        <div class="col-sm-9">
          <input
            type="checkbox"
            id="phoneNumberConfirmed"
            name="phoneNumberConfirmed"
            [(ngModel)]="user.phoneNumberConfirmed"
            #phoneNumberConfirmedField="ngModel"
            (blur)="onBlur(phoneNumberConfirmedField)"
            [class.is-invalid]="
              form.submitted && phoneNumberConfirmedField.invalid
            "
          />
        </div>
      </div>
      <div class="form-group row">
        <label for="twoFactorEnabled" class="col-sm-3 col-form-label"
          >Two Factor Enabled</label
        >
        <div class="col-sm-9">
          <input
            type="checkbox"
            id="twoFactorEnabled"
            name="twoFactorEnabled"
            [(ngModel)]="user.twoFactorEnabled"
            #twoFactorEnabledField="ngModel"
            (blur)="onBlur(twoFactorEnabledField)"
            [class.is-invalid]="form.submitted && twoFactorEnabledField.invalid"
          />
        </div>
      </div>
      <div class="form-group row">
        <label for="lockoutEnabled" class="col-sm-3 col-form-label"
          >Lockout Enabled</label
        >
        <div class="col-sm-9">
          <input
            type="checkbox"
            id="lockoutEnabled"
            name="lockoutEnabled"
            [(ngModel)]="user.lockoutEnabled"
            #lockoutEnabledField="ngModel"
            (blur)="onBlur(lockoutEnabledField)"
            [class.is-invalid]="form.submitted && lockoutEnabledField.invalid"
          />
        </div>
      </div>
      <div class="form-group row">
        <label for="accessFailedCount" class="col-sm-3 col-form-label"
          >Access Failed Count</label
        >
        <div class="col-sm-9">
          <input
            type="number"
            id="accessFailedCount"
            name="accessFailedCount"
            class="form-control"
            [(ngModel)]="user.accessFailedCount"
            #accessFailedCountField="ngModel"
            (blur)="onBlur(accessFailedCountField)"
            [class.is-invalid]="
              form.submitted && accessFailedCountField.invalid
            "
          />
        </div>
      </div>
      <div class="form-group row">
        <label for="lockoutEnd" class="col-sm-3 col-form-label"
          >Lockout End</label
        >
        <div class="col-sm-9">
          <input
            type="text"
            name="lockoutEndDate"
            class="form-control"
            [(ngModel)]="user.lockoutEnd"
            bsDatepicker
            [bsConfig]="{ adaptivePosition: true }"
          />
          <timepicker
            name="lockoutEndTime"
            [(ngModel)]="user.lockoutEnd"
          ></timepicker>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-3 col-form-label"></label>
        <div class="col-sm-9">
          <button class="btn btn-primary">Save</button>
        </div>
      </div>
    </form>
  </div>
  <div class="card-footer">
    <a
      class="btn btn-outline-secondary"
      [routerLink]="['/users']"
      style="width: 80px;"
    >
      <i class="fa fa-chevron-left"></i> Back
    </a>
  </div>
</div>
